<script setup>
import { ref, onMounted } from 'vue';
import axios from 'axios';
import { ElMessage } from 'element-plus';
// import { formatTime, formatDate } from '../../utils';
const filterTableData = ref([]);
const dialogFormVisible = ref(false); //添加模态框默认为空
const showTable = ref(true); // 表格默认展示
const cellOptions = ref([]);
const form = ref({
  region: "",
  cellId: ""
});
//绑定下拉框
async function getCelloptions() {
  try {
    const response = await axios.get(`/api/api/Complaints/sel`);
    console.log("小区数据：", response.data);
    cellOptions.value = response.data.map(item => ({
      cellId: item.cellId,
      cellName: item.cellName
    }));
  } catch (error) {
    console.error(error);
  }
}
//下拉框改变事件
async function handleSelectChange() {
  const selectedCell = cellOptions.value.find((item) => item.cellName === form.value.region);
  if (selectedCell && selectedCell.cellName !== "") {
    const cCellId = selectedCell.cellId;
    try {
      const response = await axios.get(`/api/api/Complaints/GCellId?cCellId=${cCellId}`);
      filterTableData.value = response.data.data;
      showTable.value = true;
    } catch (error) {
      console.error(error);
    }
  } else {
    // 调用获取所有数据的接口
    await ser();
  }
}
//查询
async function ser() {
  const selectedCell = cellOptions.value.find((item) => item.cellName === form.value.region);
  const cCellId = selectedCell ? selectedCell.cellId : -1;
  try {
    const response = await axios.get(`/api/api/Complaints?cCellId=${cCellId}`);
    filterTableData.value = response.data;
    console.log(filterTableData.value);
  } catch (error) {
    console.error(error);
  }
}
//添加按钮
function onSubmit() {
    dialogFormVisible.value = true;
  }
  //添加功能
  const addData = async () => {
  const selectedCell = cellOptions.value.find((item) => item.cellName === form.value.region);
  if (selectedCell) {
    const cellId = selectedCell.cellId;
    // 在发送 POST 请求之前设置数据的 cellId 属性为选中的小区 ID
    console.log(form.value);
    form.value.cCellId = cellId;
    try {
      const response = await axios.post("/api/api/Complaints", form.value);
      if (response.data === 1) {
        ElMessage.success("添加成功");
        dialogFormVisible.value = false; // 关闭对话框
        ser(); // 刷新页面数据
      } else {
        ElMessage.error("添加失败，请重试！");
      }
    } catch (error) {
      console.error(error);
    }
  }
};
//转换时间格式
function formatDate(dateString) {
  const date = new Date(dateString);
  const year = date.getFullYear();
  const month = date.getMonth() + 1;
  const day = date.getDate();
  return `${year}-${month.toString().padStart(2, '0')}-${day.toString().padStart(2, '0')}`;
}
onMounted(async () => {
  await getCelloptions();
  await ser();
});
</script>
<template>
  <el-row :gutter="20">
    <el-col :span="4">
      <el-form-item style="width: 188px;">
    <el-select v-model="form.region" placeholder="选择投诉小区" @change="handleSelectChange">
      <el-option label="全部" value="0">全部</el-option>
      <el-option v-for="item in cellOptions" :key="item.cellId" :label="item.cellName" :value="item.cellName" />
    </el-select>
  </el-form-item>
</el-col>
    <el-col :span="6">
      <el-button type="primary" @click="onSubmit()" class="TOU">投诉</el-button>
    </el-col>
  </el-row>
  <el-row>
  <el-table :data="filterTableData" style="width: 100%" v-if="showTable">
    <el-table-column label="编号" prop="cId" />
    <el-table-column label="房产所属小区" prop="cCellId" />
    <el-table-column label="用户编号" prop="cUserId" />
    <el-table-column label="投诉标题" prop="cTitle" />
    <el-table-column label="投诉内容" prop="cText" />
    <el-table-column label="是否匿名" prop="cIsMagic" />
    <el-table-column label="是否匿名" prop="cIsMagic">
    <template v-slot="{ row }">
      {{ row.cIsMagic === 0 ? '匿名' : '不匿名' }}
    </template>
  </el-table-column>
    <el-table-column label="申请状态" prop="cApplication" >
    <template v-slot="{ row }">
      {{ row.cApplication === 0 ? '正在申请' : '申请成功' }}
    </template>
  </el-table-column>
    <el-table-column label="投诉时间" prop="cCreatTime" >
      <template v-slot="{ row }">
    {{ formatDate(row.cCreatTime) }}
  </template>
  </el-table-column>
    <!-- <el-table-column align="right">
      <template #default="scope">
        <el-button type="success" plain @click="editData(scope.row)">更新</el-button>
      </template>
    </el-table-column> -->
  </el-table>
</el-row>
<el-dialog v-model="dialogFormVisible" title="添加" width="500">
    <el-form :model="form">
      <el-form-item label="用户编号" :label-width="formLabelWidth">
         <el-input v-model="form.cUserId" autocomplete="off" />
      </el-form-item>
      <el-form-item label="投诉标题" :label-width="formLabelWidth">
         <el-input v-model="form.cTitle" autocomplete="off" />
      </el-form-item>
      <el-form-item label="投诉内容" :label-width="formLabelWidth">
        <el-input v-model="form.cText" autocomplete="off" />
      </el-form-item>
      <el-form-item label="是否匿名" :label-width="formLabelWidth">
        <el-input v-model="form.cIsMagic" autocomplete="off" />
      </el-form-item>
      <el-form-item label="申请状态" :label-width="formLabelWidth">
        <el-input v-model="form.cApplication" autocomplete="off" />
      </el-form-item>
      <el-form-item style="width: 188px;" label="小区名称:">
    <el-select v-model="form.region" placeholder="选择投诉小区">
      <el-option v-for="item in cellOptions" :key="item.cellId" :label="item.cellName" :value="item.cellName" />
    </el-select>
  </el-form-item>
    </el-form>
     <template #footer>
        <div class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取消</el-button>
          <el-button type="primary" @click="addData()"> 确认 </el-button>
        </div>
      </template>
    </el-dialog>
</template>
<style>
</style>